<script>
			var module_inits = [];
			
			function load_init_modules() {
				for (var i = 0; i < module_inits.length; i++) {
					module_inits[i]();
				}
			}
			
			function call_me(fun) {
				module_inits.push(fun);
			}
			onload = load_init_modules;
		</script>

		<script>
			var slider_images_url = [
			{volist name='pics' id='vo'}
			'{$vo.url}',
			{/volist}
			];
			var e_desc = '{$title}';
		</script>

<style type="text/css">

    *
    {
        padding: 0px;
        margin: 0px;
        -webkit-box-sizinf:border:border-box;
    }

    body
    {
        background-color:black;
    }

    #container
    {
        width: 500px;
        height: 750px;
        position: absolute;
        overflow: hidden;
        background-image: url(__DIR__{$dir}/img/bk.jpg);
    }

    #huajuan
    {
        position: absolute;
        width: 500px;
        height: 750px;
        -webkit-animation: huajuanmove 2s linear infinite alternate;
        z-index: 1;
    }
    #img_div
    {
        position: absolute;
        top: 124px;
        left: 76px;
        width: 332px;
        height: 507px;
        /*background-color: #ffffff;*/
        overflow: hidden;
    }

    #downbox
    {
        position: absolute;
        top: 124px;
        width: 500px;
        height: 570px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
    }
    #down1
    {
        position: absolute;
        left: 59px;
        /*-webkit-animation: changedown1 2s linear forwards;*/
    }

    #up
    {
         position: absolute;
         top: 106px;
         left: 59px;
    }

    #front_box,#back_box
    {
        -webkit-transform-origin: 50% 0%;
        position: absolute;
        overflow: hidden;
    }

    @-webkit-keyframes changedown1
    {
        from   {-webkit-transform: translate(0px,0px);}
        to     {-webkit-transform: translate(0px,-132px);}
    }
    @-webkit-keyframes changebox
    {
        from   {height: 507px;}
        to     {height: 332px;}
    }

    #left
    {
        position: absolute;
        left: 57px;
        top: 180px;
        width: 83px;
        height: 339px;
        -webkit-transform-origin: 50% 0%;
        -webkit-animation: changeleft 2s linear forwards;
    }
    #right
    {
        position: absolute;
        width: 90px;
        top: 180px;
        left: 371px;
        height: 339px;
        -webkit-transform-origin: 50% 0%;
        -webkit-animation: changeright 2s linear forwards;
    }
    #down
    {
        position: absolute;
        top: 520px;
        left: 0px;
        -webkit-animation: changedown 2s linear forwards;
    }
    
    @-webkit-keyframes changedown
    {
        from   {-webkit-transform:translate(0px,0px);}
        to     {-webkit-transform:translate(0px,-132px);}
    }
    @-webkit-keyframes changeleft
    {
        from   {-webkit-transform: scale(1,1);}
        to     {-webkit-transform: scale(1,.61);}
    }
    @-webkit-keyframes changeright
    {
        from   {-webkit-transform: scale(1,1);}
        to     {-webkit-transform: scale(1,.61);}
    }

    



    #guangban1{
        position: absolute;
        height:52px;
        width:52px;
        left: 65px;
        top:23px;
        opacity: 0;
        -webkit-animation:g1 5s 2s infinite linear both;
    }

    @-webkit-keyframes g1{
      0%   {-webkit-transform:opacity:0;}
      13%  {-webkit-transform:scale(.5,.5);opacity:1;}
      25%  {-webkit-transform:scale(0,0);opacity:0;}
      100% {-webkit-transform:scale(0,0);opacity:0;}

    }

    #guangban2{
        position: absolute;
        height:52px;
        width:52px;
        left:408px;
        top:70px;
        opacity: 0;
        -webkit-animation:g2 4s 2.7s infinite linear both;
    }


    @-webkit-keyframes g2{
      0%   {-webkit-transform:opacity:0;}
      20%  {-webkit-transform:scale(1.5,1.5);opacity:1;}
      40%  {-webkit-transform:scale(0,0);opacity:0;}
      100% {-webkit-transform:scale(0,0);opacity:0;}

    }



    #guangban3{
        position: absolute;
        height:52px;
        width:52px;
        left:-6px; 
        top:252px;
        opacity: 0;
        -webkit-animation:g2 4s 3.3s infinite linear both;
    }

    #guangban4{
        position: absolute;
        height:52px;
        width:52px;
        left: 20px;
        top:584px;
        -webkit-animation:g2 4s 4.3s infinite linear both;
    }

    #guangban5{
        position: absolute;
        height:52px;
        width:52px;
        left: 388px;
        top:522px;
        -webkit-animation:g2 4s 4.8s infinite linear both;
    }

    #guangban7{
        position: absolute;
        height:52px;
        width:52px;
        left: 238px;
        top: 412px;
        -webkit-animation:g7 8s 2.5s infinite linear both;
    }

    @-webkit-keyframes g7{
      0%   {-webkit-transform:opacity:0;}
      30%  {-webkit-transform:scale(3,3);opacity:1;}
      60%  {-webkit-transform:scale(0,0);opacity:0;}
      100% {-webkit-transform:scale(0,0);opacity:0;}

    }

    #guangban6{
        position: absolute;
        height:52px;
        width:52px;
        left: 93px;
        top:120px;
        -webkit-animation:g3 6s 3s infinite ease both;
    }

    @-webkit-keyframes g3{
      0%   {-webkit-transform:scale(8,8);opacity:0.7;}
      30%  {-webkit-transform:scale(10,10);opacity:0.7;}
      60%  {-webkit-transform:scale(10,10);opacity:0.7;}
      100%  {-webkit-transform:scale(8,8);opacity:0.7;}
    }

    #liuxing1{
        position: absolute;
        width: 42px;
        height: 49px;
        left:220px;
        top:-60px;
        -webkit-animation:zhuan1 1s infinite linear both; 
     }

    #liuxing2{
        position: absolute;
        width: 42px;
        height: 49px;
        left:370px;
        top:-60px;
        -webkit-animation:zhuan1 1s infinite linear both; 
        
    }

    #move1{
        -webkit-animation:move1 5s .2s infinite linear both; 
    }

    #move2{
        -webkit-animation:move2 5s .7s infinite linear both; 
    }

    @-webkit-keyframes move1
    {
        0%   {-webkit-transform: translate(0px,0px);}
        20%     {-webkit-transform: translate(-350px,150px);}
        100%     {-webkit-transform: translate(-350px,150px);}

    }

    @-webkit-keyframes move2
    {
        0%  {-webkit-transform: translate(0px,0px);}
        20%     {-webkit-transform: translate(-500px,285px);}
        100%     {-webkit-transform: translate(-500px,285px);}
    }

    .shan{
        -webkit-animation:shan1 .1s infinite linear both; 
    }

    @-webkit-keyframes shan1
    {
        from   {-webkit-transform: scale(0.9,0.9);opacity:0}
        to     {-webkit-transform: scale(0.9,0.9);opacity:1}
    }

    @-webkit-keyframes zhuan1
    {
        from   {-webkit-transform: rotate(0deg)}
        to     {-webkit-transform: rotate(360deg)}
    }









    #fanguang
    {
        position: absolute;
     
        width: 365px;
        height: 262px;
        top: -262px;
        left: 0px;
        overflow: hidden;
    }

    @-webkit-keyframes fanguang
    {
        from  {-webkit-transform: translate(0px,0px)}
        to    {-webkit-transform: translate(0px,700px)}
    }




</style>

<div id="container">

    <div id="huajuan" style="opacity: 1;">
        <div id="img_div" style="height: 283.756px; animation: change_box0to1 2s linear 0.1s forwards;">
            <div id="back_box" style="width: 332px; height: 442.667px; animation: change_box_sec_in0to1 2s linear forwards;">
                <img id="my_imgback" style="position: absolute; top: 0px; left: 0px;" src="__DIR__{$dir}/img/" width="332" height="442">
            </div>
            <div id="front_box" style="width: 332px; height: 283.756px; animation: change_box_out0to1 2s linear forwards;">
                <img id="my_imgfront" style="position: absolute; top: 0px; left: 0px;" src="__DIR__{$dir}/img/" width="332" height="283">
            </div>  

            <!-- <img id='fanguang' src='http://t3.qpic.cn/mblogpic/9698cad021015d004d6e/2000'> -->
            <img id="fanguang" src="__DIR__{$dir}/img/fanguang.png" style="animation: fanguang 2s linear forwards;">



        </div>

        <div id="downbox">
            
              <img id="down1" src="__DIR__{$dir}/img/down1.png" style="transform: translate(0px, -223.244px); animation: change_img0to1 2s linear forwards;">
            
        </div>
        
        <img id="up" src="__DIR__{$dir}/img/up1.png">

    </div>

    <img id="guangban1" src="__DIR__{$dir}/img/guangban.png">
    <img id="guangban2" src="__DIR__{$dir}/img/guangban.png">
    <img id="guangban3" src="__DIR__{$dir}/img/guangban.png">
    <img id="guangban4" src="__DIR__{$dir}/img/guangban.png">
    <img id="guangban5" src="__DIR__{$dir}/img/guangban.png">
    <img id="guangban7" src="__DIR__{$dir}/img/guangban.png">
    <img id="guangban6" src="__DIR__{$dir}/img/guangban.png">


    <div id="move1">
        <div class="shan">
           <img id="liuxing1" src="__DIR__{$dir}/img/liuxing.png">
        </div>
    </div>
    <div id="move2">
        <div class="shan">
           <img id="liuxing2" src="__DIR__{$dir}/img/liuxing.png">
        </div>
    </div>


</div>

<script>
var load_num=0;
var images_width=[];
var images_height=[];

var change_imgdiv;
var change_down;
var images_position=[];

var first_img;
var second_img;
var first_box;
var second_box;

function id (name)
{
    return document.getElementById(name);
}

var readynum = 0;
var Onload_imgs = new Array();
var canshow = true;



function load_images ()
{
    change_imgdiv=id('img_div');
    change_down=id('down1');

    first_img=id('my_imgfront');
    second_img=id('my_imgback');

    first_box=id('front_box');
    second_box=id('back_box');

    if(slider_images_url.length<2)
    {
        slider_images_url[1]=slider_images_url[0];
    }

    for(var i=0;i<slider_images_url.length;i++)
    {
        var img=new Image();
        // img.index=i;
        img.src=slider_images_url[i];
        img.onload=img_onload;
    }
}

function img_onload (event)
{
    var img=event.target;
    Onload_imgs[readynum]=img.src;
    images_width[readynum]=img.width;
    images_height[readynum]=img.height;


    if(readynum>=1)
    {
        if (images_width[readynum]/images_height[readynum]<(332/507))
        {
            images_position[readynum]=507;
        }
        else
        {
            images_position[readynum]=332*images_height[readynum]/images_width[readynum];
        };

        createStyle(readynum-1);
    }
    else
    {
        if (images_width[0]/images_height[0]<(332/507))
        {
            images_position[0]=507;
        }
        else
        {
            images_position[0]=332*images_height[0]/images_width[0];
        };
        change_imgdiv.style.height=images_position[0]+'px';
        change_down.style.webkitTransform='translate(0px,-'+(507-images_position[0])+'px)';

    }
    readynum++;

    console.log(readynum);
    if ((readynum>1&&canshow==true)||slider_images_url.length==1)
    {
        canshow=false;
        load_num=0;
        
        id('huajuan').style.opacity=1;
        beginshow();
    };

}
function createStyle (num)
{
    var i=num;


    if(Onload_imgs.length>1)
    {
            var j=i+1;
            if(j==Onload_imgs.length)
            {
                j=0;
            }

            //创建移动外面div动画
            var csstext='@-webkit-keyframes change_box'+i+'to'+j+' {from{height:'+images_position[i]+'px} to{height:'+images_position[j]+'px}}';
            var style=document.createElement('style');
            document.head.appendChild(style);
            // console.log(csstext);
            var sheet=style.sheet;
            sheet.insertRule(csstext,0);


            //创建下面画轴移动动画
            var translate_y1=507-images_position[i];
            var translate_y2=507-images_position[j];
            var csstext='@-webkit-keyframes change_img'+i+'to'+j+' {from{-webkit-transform: translate(0px,-'+translate_y1+'px)} to{-webkit-transform:translate(0px,-'+translate_y2+'px)}}';
            var style=document.createElement('style');
            document.head.appendChild(style);
            // console.log(csstext);
            var sheet=style.sheet;
            sheet.insertRule(csstext,0);

            var scale_y=images_position[j]/images_position[i];
            var csstext='@-webkit-keyframes change_box_in'+i+'to'+j+' {from{-webkit-transform:scale(1,'+1/scale_y+');opacity:0;} to{-webkit-transform:scale(1,1);opacity:1;}}';
            var style=document.createElement('style');
            document.head.appendChild(style);
            var sheet=style.sheet;
            sheet.insertRule(csstext,0);

            var csstext='@-webkit-keyframes change_box_out'+i+'to'+j+' {from{-webkit-transform:scale(1,1);opacity:1;} to{-webkit-transform:scale(1,'+scale_y+');opacity:0;}}';
            var style=document.createElement('style');
            document.head.appendChild(style);
            var sheet=style.sheet;
            sheet.insertRule(csstext,0);
            // console.log(csstext);


            var csstext='@-webkit-keyframes change_box_sec_in'+i+'to'+j+' {from{-webkit-transform:scale(1,'+(1/scale_y)+');} to{-webkit-transform:scale(1,1);}}';
            var style=document.createElement('style');
            document.head.appendChild(style);
            var sheet=style.sheet;
            sheet.insertRule(csstext,0);
            // console.log(csstext);

            var csstext='@-webkit-keyframes change_box_sec_out'+i+'to'+j+' {from{-webkit-transform:scale(1,1);} to{-webkit-transform:scale(1,'+(scale_y)+');}}';
            var style=document.createElement('style');
            document.head.appendChild(style);
            var sheet=style.sheet;
            sheet.insertRule(csstext,0);
        
    }


    // alert();

}


function beginshow ()
{

    if(load_num==Onload_imgs.length)
        load_num=0;
    var next_num=load_num+1;
    if(next_num==Onload_imgs.length)
        next_num=0;

    cutimage(0,load_num);
    first_img.src=Onload_imgs[load_num];
    cutimage(1,next_num);
    second_img.src=Onload_imgs[next_num];
    cleanfanguang();

    setTimeout(function()
    {
        change_imgdiv.style.webkitAnimation='change_box'+load_num+'to'+next_num+' 2s 0.1s linear forwards';
        change_down.style.webkitAnimation='change_img'+load_num+'to'+next_num+' 2s linear forwards';

        // console.log(change_imgdiv.style.webkitAnimation);
        
        showfanguang();


        first_box.style.webkitAnimation='change_box_out'+load_num+'to'+next_num+' 2s linear forwards';
        second_box.style.webkitAnimation='change_box_sec_in'+load_num+'to'+next_num+' 2s linear forwards';
        // console.log(second_box.style.webkitAnimation)
        
        load_num++;

        setTimeout(nextshow,4500);
    },3000);

}

function nextshow ()
{
    if(load_num==Onload_imgs.length)
        load_num=0;
    var next_num=load_num+1;
    if(next_num==Onload_imgs.length)
        next_num=0;

    // first_img.style.opacity=0;

    cutimage(0,next_num);
    first_img.src=Onload_imgs[next_num];
    cleanfanguang();


    setTimeout(function()
    {
        change_imgdiv.style.webkitAnimation='change_box'+load_num+'to'+next_num+' 2s 0.1s linear forwards';
        change_down.style.webkitAnimation='change_img'+load_num+'to'+next_num+' 2s linear forwards';

        // console.log(change_imgdiv.style.webkitAnimation);
        
        showfanguang();

        first_box.style.webkitAnimation='change_box_in'+load_num+'to'+next_num+' 2s linear forwards';
        console.log(first_box.style.webkitAnimation);
        second_box.style.webkitAnimation='change_box_sec_out'+load_num+'to'+next_num+' 2s linear forwards';
        
        load_num++;

        setTimeout(nextnextshow,4500);

    },3000)
}

function nextnextshow ()
{
    if(load_num==Onload_imgs.length)
        load_num=0;
    var next_num=load_num+1;
    if(next_num==Onload_imgs.length)
        next_num=0;

    first_img.style.opacity=1;
    cutimage(1,next_num);
    second_img.src=Onload_imgs[next_num];
    cleanfanguang();

    

    setTimeout(function()
    {
        change_imgdiv.style.webkitAnimation='change_box'+load_num+'to'+next_num+' 2s 0.1s linear forwards';
        change_down.style.webkitAnimation='change_img'+load_num+'to'+next_num+' 2s linear forwards';

        // console.log(change_imgdiv.style.webkitAnimation);

        showfanguang();

        first_box.style.webkitAnimation='change_box_out'+load_num+'to'+next_num+' 2s linear forwards';
        second_box.style.webkitAnimation='change_box_sec_in'+load_num+'to'+next_num+' 2s linear forwards';
        
        load_num++;
        setTimeout(nextshow,4500);

    },3000)
}


function showfanguang ()
{
    id('fanguang').style.webkitAnimation='fanguang 2s linear forwards';
}

function cleanfanguang ()
{
    id('fanguang').style.webkitAnimation='';
}

function cutimage(img_obj,load_num)
{
    var myimg;
    var mybox;
    if(img_obj==0)
    {
        myimg=first_img;
        mybox=first_box;

    }
    else
    {
        myimg=second_img;
        mybox=second_box;
    }

    var img_height=images_height[load_num];
    var img_width=images_width[load_num];
    var img_bili=img_width/img_height;

    if (img_bili<(332/507)) 
    {
        myimg.width=332;
        myimg.height=332/img_bili;
        myimg.style.left='0px';
        myimg.style.top='-'+((myimg.height-507)/2)+'px';
        
        mybox.style.width='332px';
        mybox.style.height='507px';
    }
    else
    {
        myimg.width=332;
        myimg.height=332/img_bili;
        myimg.style.top='0px';
        myimg.style.left='0px';

        mybox.style.width='332px';
        mybox.style.height=332/img_bili+'px';
    }
}
call_me(load_images);
</script>



	<link type="text/css" rel="stylesheet" href="__DIR__{$dir}/css/guanzhu.css">
	<link rel="stylesheet" type="text/css" href="__DIR__{$dir}/css/buttons.css">
	
	<style type="text/css">
		@-webkit-keyframes zhuan
		{
			0%
			{
				-webkit-transform:rotate(0deg);
			}

			100%
			{
				-webkit-transform:rotate(360deg);
			}
		}


		@-webkit-keyframes aa_out_bounce_left
		{
		    0%{
		        -webkit-transform:translateX(0)
		    }
		    20%{
		        -webkit-transform:translateX(20px)
		    }
		    100%{
		        -webkit-transform:translateX(-125px)
		    }
		}
		@-webkit-keyframes aa_in_bounce_center
		{
		    0%{
		        opacity:0;
		        -webkit-transform:scale(.3)
		    }
		    50%{
		        opacity:1;
		        -webkit-transform:scale(1.05)
		    }
		    70%{
		        -webkit-transform:scale(.9)
		    }
		    100%{
		        -webkit-transform:scale(1)
		    }
		}
		@-webkit-keyframes jinbi
		{
			from {-webkit-transform: rotateY(0deg);}
			to   {-webkit-transform: rotateY(180deg);}
		}
		.jubao-item
		{
			position: relative;
			float: left;
			width: 360px;
			height: 55px;
			top: 0px;
			font-size: 20px;
			line-height: 55px;
			margin-left: 20px;
			border-bottom: 1px solid #EBEBEB;
		}
		.jubao-radio
		{
			position: absolute;
			right: 10px;
			width: 25px;
			height: 25px;
			top: 20px;
		}

		.jubao-detail
		{
			position: relative;
			float: left;
			width: 360px;
			margin-left: 20px;
		}
		.jubao-detail textarea
		{
			width: 360px;
		    height: 80px;
		    font-size: 20px;
		    resize: none;
		    line-height: 40px;
		    border: none;
		    background-color: #eee;
		    border-radius: 10px;
		    padding-left: 10px;
		}
		@-webkit-keyframes guangzhu_ani
		{
			from  {-webkit-transform: scale(1);}
			to    {-webkit-transform: scale(1.05);}
		}
		@-webkit-keyframes che_ani
		{
		    0%    {-webkit-transform: translate(-20px,0px);opacity: 1}
		    8%  {-webkit-transform: translate(100px,0px) scale(0.95,1.05);opacity: 1}
		    10%  {-webkit-transform: translate(100px,0px) scale(1,1);opacity: 1}
		    12%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    14%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    16%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    18%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    20%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    45%   {-webkit-transform: translate(100px,0px) scale(0.97,1.03); opacity: 1}
		    50%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    60%   {-webkit-transform: translate(200px,0px); opacity: 0}
		    100%  {-webkit-transform: translate(200px,0px); opacity: 0}
		}
		@-webkit-keyframes che1_ani
		{
		    0%    {opacity: 1}
		    12%   {opacity: 1}
		    14%   {opacity: 0.5}
		    16%   {opacity: 1}
		    18%   {opacity: 0.5}
		    20%   {opacity: 1}
		    100%  {opacity: 1}

		}
		@-webkit-keyframes baoming
		{
		    0%  {opacity: 0}
		    58% {opacity: 0;-webkit-transform: scale(1.4);}
		    59% {opacity: 1;-webkit-transform: scale(1.4);}
		    70% {opacity: 1;-webkit-transform: scale(0.95);}
		    72% {opacity: 1;-webkit-transform: scale(1);}
		    80% {opacity: 0.8;-webkit-transform: scale(1.1);}
		    88% {opacity: 1;-webkit-transform: scale(1);}
		    93% {opacity: 0;-webkit-transform: scale(1.3);}
		    100%{opacity: 0}
		}
		@-webkit-keyframes shijia
		{
		    0%  {-webkit-transform: rotate(20deg) scale(0.8);opacity: 0}
		    10% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    20% {-webkit-transform: rotate(20deg) scale(0.85);}
		    28% {-webkit-transform: rotate(20deg) scale(0.75);}
		    38% {-webkit-transform: rotate(20deg) scale(0.85);}
		    47% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    55% {-webkit-transform: rotate(20deg) scale(0.90);opacity: 0}
		    100%{opacity: 0}

		}
		@-webkit-keyframes biaozhi_ani
		{
		    0%  {opacity: 0}
		    10% {opacity: 0}
		    20% {opacity: 1}
		    45% {opacity: 1}
		    55% {opacity: 0}
		    100%{opacity: 0}
		}
		#musicinfo
		{
			color: #fff;
			text-shadow: 1px 1px 2px #000;
			font-size: 15px;
			position: fixed;
			left: 432px;
		    top: 82px;
		    width: 60px;
		    height: 20px;
		    z-index: 100;
		    display: none;
		    opacity: 1;
		}
		@-webkit-keyframes heart_beating
		{
			from {opacity: 1;-webkit-transform: scale(1);}
			to   {opacity: 0.8;-webkit-transform: scale(0.8);}
		}
		@-webkit-keyframes heart1_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(-20px,-50px) scale(1.5);}
		}
		@-webkit-keyframes heart2_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(20px,-60px) scale(2);}
		}
		@-webkit-keyframes heart3_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(70px,-40px) scale(2);}
		}
#enddiv
{
    position: absolute;
    width: 500px;
    height: 815px;
    background-color: rgba(0,0,0,0.7);
    z-index: 10000;
    display: none;
    opacity: 0;
}
#title_div
{
    width: 320px;
    height: 200px;
    left: 90px;
    top: 250px;
    color: #fff;
    font-size: 25px;
    position: relative;
    line-height: 45px;
    text-align: center;
    font-family: '微软雅黑';
    display:table;
}
#title_line
{
    position: absolute;
    width: 370px;
    height: 2px;
    background-color: #fff;
    top: 415px;
    left: 65px;
}
#reshowbtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(94,159,177,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 74px;
}
#guanzhubtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(185,91,83,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 268px;
}
@-webkit-keyframes fadein
{
	from  {opacity: 0}
	to    {opacity: 1}
}
	</style>

